<template>
    <div class="content">
        <div style="position: sticky; top: 0; left: 0">
            <van-tabs v-model:active="active" sticky color="#66d6ff" @click-tab="onClickTab">
                <van-tab title="向我发起的"></van-tab>
                <van-tab title="我发起的"></van-tab>
            </van-tabs>
        </div>

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="downPage">
            <empty v-if="!isList.length"></empty>

            <div class="card" @click="pageto(item)" v-for="(item, index) in isList" :key="index">
                <div class="flexsty">
                    <img src="@/assets/index/person.png" style="width: 35px; height: 35px; margin-left: 15px" alt="" />
                    <div style="margin-left: 10px">
                        <div style="color: #545454; margin-bottom: 10px">{{ item.TARGET_AGENT_NAME }}向{{ item.SOURCE_AGENT_NAME }}进行回拨</div>
                        <div style="color: #9a9a9a">{{ changeFormdate(item.CREATE_TIME) }}</div>
                    </div>
                </div>
                <div style="display: flex; align-items: center; flex-shrink: 0">
                    <span style="font-size: 14px; color: #545454">{{ item.COUNT }}台</span>
                    <img src="@/assets/chevron-down@2x.png" style="width: 15px; height: 15px; margin-right: 12px; vertical-align: bottom" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script lang="ts" setup>
import { allotBackRecordBySource, allotBackRecordByTarget } from '../../api/posManagement'
import { formatDate } from '../../utils/filter.js'
import { useRouter } from 'vue-router'
const pageNum = ref(0)
const loading = ref(false)
const finished = ref(false)
const active = ref(0)
let isList = ref([])
const router = useRouter()

const pageto = item => {
    router.push({
        path: '/recordDetailed',
        query: {
            id: item.BILL_NO
        }
    })
}
const changeFormdate = computed(() => {
    return time => {
        let date = new Date(time)
        return formatDate(date, 'yyyy-m-d h:i:s')
    }
})
const recordList = () => {
    allotBackRecordByTarget({
        currentPage: pageNum.value
    }).then(res => {
        if (res.object.length < 10) {
            finished.value = true
        }
        loading.value = false
        isList.value = isList.value.concat(res.object)
        console.log(isList.value, 'isList.value')
    })
}
const getAllotBackRecordBySource = () => {
    allotBackRecordBySource({
        currentPage: pageNum.value
    }).then(res => {
        if (res.object.length < 10) {
            finished.value = true
        }
        loading.value = false
        isList.value = isList.value.concat(res.object)
    })
}

const onClickTab = () => {
    pageNum.value = 0
    finished.value = false
    downPage()
    isList.value = []
}

const downPage = () => {
    pageNum.value += 1
    if (!active.value) {
        recordList()
    } else {
        getAllotBackRecordBySource()
    }
}
//  recordList()
</script>

<style scoped lang="scss">
.van-list {
    padding: 10px;
}
.content {
    background: #f5f5f5;
}

.card {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    line-height: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.flexsty {
    display: flex;
    flex-direction: columns;
}
</style>
